<template>
  <!--沪、深股通-->
  <div class='g-content-wrapper'>
    <header-top class="header">{{aid?'深':'沪'}}股通资金</header-top>
    <div class='g-content'>
      <state :type="aid?4:3"></state>

      <div class="sh-stock-master">
        <pie-chart :pie-chart-data="pieChartData"></pie-chart>
        <div class="interval"></div>
        <tab-bar class='tabBar' :tab-bar='menuTabBar' :on-selected='onBarSelected'></tab-bar>
        <!--图表-->
        <div class="chart1">
          <chart-connect v-if='msgBar == 0' :aid="aid" :chart-data="chartData"></chart-connect>
          <chart-overlap v-else :aid="aid" :chart-data = "chartOverlapData"></chart-overlap>
        </div>
        <div class="interval"></div>
        <detail-list list-type="c" :list-data="listData" :head-content = 'headContent' :updateTime="listUpdateTime">{{aid?'深':'沪'}}股通资金流入标的</detail-list>
        <div class="interval"></div>
        <div class='comment'>
          <h1 class='comment-title'>沪/深股通资金</h1>
          <p>
            1.	什么沪/深股通？<br/>
            沪/深股通是指指投资者委托香港经纪商，经由香港联合交易所设立的证券交易服务公司，向上海/深圳交易所进行申报（买卖盘传递），买卖规定范围内的上海/深圳交易所上市的股票，无需开通上海/深圳股票账户。<br/>
            2.	沪/深股通资金流向有什么用？<br/>
            沪/深股通的资金流向反映了其投资者对后市的判断。由于沪/深股通的投资者一般为机构和专业投资者，且资金流入流出分钟级实时更新，因此沪/深股通是盯盘必看的指标之一。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headerTop from '@/pages/common/HeaderTop.vue'
  import state from '@/pages/common/State.vue'
  import tabBar from '@/pages/common/TabBar.vue'
  import detailList from '@/pages/common/DetailList.vue'
  import chartConnect from '@/pages/common/ChartConnect.vue'
  import pieChart from './children/PieChart.vue'
  import chartOverlap from '@/pages/common/ChartOverlap'
  import remoteDAO from '@/common/remoteDAO'
  import constant from '@/common/constant'
  import { transform1013 } from '@/common/common'
  import { Loop } from '@/common/polling'

  export default {
    name: 'stockConnect',
    data () {
      return {
        menuTabBar: [{name: '今日'}, {name: '近一月'}, {name: '近三月'}, {name: '近一年'}],
        headContent: ['流入标的', '现价', '净流入'],
        aid: 0,
        msgBar: 0,
        listUpdateTime: '',
        listData: [],
        pieChartData: {},
        chartData: {},
        IndexData: '',
        chartOverlapData: null,
        topDesc: ''
      }
    },
    components: {
      headerTop,
      state,
      tabBar,
      detailList,
      pieChart,
      chartOverlap,
      chartConnect
    },
    methods: {
      onBarSelected (index) {
        if (this.msgBar == index) return;
        this.$store.dispatch('showLoading');                // tab选择    loading显示
        this.msgBar = index;
        if (index) {
          this.fetchOverlapData()
        } else {
          this.fetchPageData();
        }
      },
      async fetchPageData() {
        let vm = this;
        try {
          const [connectChartData, index, intoUnderlying] = await Promise.all([
            remoteDAO.invoke(constant.InterfaceEnum.GET_C_M_FUND, {type: vm.aid == 0 ? 4 : 5}),     // 获取 沪深联动图表数据  1013
            remoteDAO.getIndexMinList(this.$route.params.aid),
            remoteDAO.invoke(constant.InterfaceEnum.GET_C_M_STOCK, {type: vm.aid == 0 ? 4 : 5})       // 获取当日流入标的  1015
          ]);
          console.log(index)
          vm.chartData = {
            ...transform1013(connectChartData),
            indexData: index.data
          };
          console.log(connectChartData, '--------联动图表1013--------');

          console.log(intoUnderlying, '--------流入标的1015--------');
          vm.listUpdateTime = intoUnderlying.date.slice(-4).replace(/(^.{2})/, '$1' + ':');
          vm.listData = [];
          intoUnderlying.TableInfo.forEach((item, index) => {
            if (index >= 10) return;
            vm.listData.push({
              strName: item.stockname,
              strCode: item.stock,
              netFlowIn: item.jlr,
              nAmount: item.zd,
              nRate: item.zdf,
              nPrice: item.Match
            })
          })

          // 饼图数据
          vm.pieChartData = {
            sumIn: connectChartData.TableInfo[connectChartData.TableInfo.length - 1].ljbmoney,
            sumOut: connectChartData.TableInfo[connectChartData.TableInfo.length - 1].ljsmoney,
            pieChartUpdateTime: intoUnderlying.date.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5')
          };
        } catch (err) {
          alert(err);
          this.$store.dispatch('showError');              //  请求失败   error显示
        }
      },
      async fetchOverlapData() {
        try {
          let pType = [30, 90, 365][this.msgBar - 1];
          let [fund, index] = await Promise.all([
            remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_FUND, {type: this.aid == 0 ? 4 : 5, pType}),
            remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_INDEX, {type: this.aid == 0 ? 1 : 2, pType})
          ]);
          console.log(fund, '1018');
          console.log(index, '1019');
          let xTime = [];
          let bmoney = [];
          let smoney = [];
          let indexData = [];
          fund.TableInfo.forEach((item, index) => {
            bmoney.push(item.bmoney);
            smoney.push(item.smoney * -1)
          });
          for (let item of index.TableInfo) {
            xTime.push(item.date.slice(-4).replace(/(\d{2})/, '$1.'));
            indexData.push(item.price)
          }
          this.chartOverlapData = {
            xTime,
            in: bmoney,
            out: smoney,
            indexData
          }
        } catch (err) {
          alert(err);
          this.$store.dispatch('showError');              //  请求失败   error显示
        }
      },

      transitionDone () {
        Loop.getInstance().register(this.fetchPageData);
      }
    },
    created() {
      this.aid = this.$route.params.aid == 'sh' ? 0 : 2;
    }
  }
</script>
<style lang='less' scoped>
  @import '../../assets/css/cssReset';
  @import '../../assets/css/variables';
  .tabBar{
    margin: 0;
    padding: .15rem 0;
  }
</style>
